/*
 * 测肤走向组件
 * @Author: ljb
 * @Date: 2018-09-06 15:24:44
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-28 15:57:26
 */
<style lang="less" rel="stylesheet/less" type="text/less">

	.timeline-list {
		position: relative;
		/*添加时间轴线*/
		&::before {
			content: "";
			position: absolute;
			top: 2px;
			left: 30px;
			width: 1px;
			height: 99%;
			background-color: #E5E5E5;
			z-index: 1;
		}
		/*添加时间轴线 END*/
		.skin-record-item {
			display: flex;
			align-items: center;
			margin-bottom: 60px;
			/*时间轴的图标样式*/
			.timeline-icon {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				overflow: hidden;
				font-size: 0;
				position: relative;
				z-index: 10;
				img {
					width: 100%;
					height: 100%;
				}
			}
			/*时间轴的图标样式 END*/
			/*时间轴的内容部分*/
			.timeline-content {
				width: 100%;
				& > p {
					padding-left: 20px;
					box-sizing: border-box;
					&.time {
						font-size: 16px;
						color: #999;
					}
					&.content {
						font-size: 16px;
						cursor: pointer;
						color: #666;
						span {
							color: #2198FD;
						}
					}
				}
			}
			/*时间轴的内容部分 END*/
		}
	}

</style>
<template>
	<div class="timeline-list">
		<div
			v-for="(record,index) in skinRecords"
			:key="index"
			class="skin-record-item">
			<div class="timeline-icon">
				<img
					:src="icon_map[typeId]">
			</div>
			<div class="timeline-content">
				<p class="time">{{ record.created_at.split(' ')[0] }}</p>
				<p class="content">{{ $t('report_detail.in') }}<span
					class="content-in"
					@click="confirmSelect(record.id)">{{ `${record.store.name + $t('report_detail.complete_skin_test',{field: typeId === 'hm' ? $t('report_detail.touch_test') : $t('report_detail.image_test')})}` }}</span></p>
			</div>
		</div>
	</div>
</template>

<script>

// 3代表是hm，智能测肤，2代表是wax，3D测肤
// const HM_SKIN_RECORD_ID = 3;
// const WAX_SKIN_RECORD_ID = 2;

export default {
	name: 'SkinTestTrend',
	props: {
		typeId: {
			type: String,
			default() {
				return 'hm';
			},
		},
		skinRecords: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			icon_map: {
				hm: require('src/assets/icon/shuju_tuxiangdongxiang_icon.svg'),
				wax: require('src/assets/icon/shuju_jiechuxiang_icon.svg'),
			},	// 3代表是hm，智能测肤，2代表是wax，3D测肤

			show_modal: false, // 弹窗的控制

			current_user_id: '1',

			skin_data: {}, // 肤质数据

			spin_show: false, // 控制加载
		};
	},
	methods: {
		/**
		 * 父子组件通信
		 * @param {String} id {匹配select选中值}
		 * @return {undefined} {description}
		 */
		confirmSelect(id) {
			this.$emit('showModal', id);
		},

	},
};
</script>
